<template>
    <div>
        <video 
            ref="videoPlayer" 
            id="videoplayer" 
            class="video-js" 
            @play="onPlayerPlay($event)" 
            @pause="onPlayerPause($event)"
            @ended="onPlayerEnded($event)"
            @waiting="onPlayerWaiting($event)"
            @playing="onPlayerPlaying($event)"
            @loadeddata="onPlayerLoadeddata($event)"
            @timeupdate="onPlayerTimeupdate($event)"
            @canplay="onPlayerCanplay($event)"
            @canplaythrough="onPlayerCanplaythrough($event)"
            @statechanged="playerStateChanged($event)"
            @ready="playerReadied"
        >
        </video>
    </div>
</template>

<script>
export default {
    name: "VideoPlayer2",
    props: {
        options: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    data () {
        return {
            player: null
        };
    },
    created () {
        this.$nextTick( () => {
            this.player = this.$VideoJs(this.$refs.videoPlayer, this.options);
            const player = this.$VideoJs('videoplayer_html5_api');
            player.ready(function () {
                let _this = this;
                _this.playbackRate( parseFloat(4));
            });
        });
    },
    mounted () {

    },
    beforeDestroy () {
        if (this.player) {
            this.player.dispose();
        }
    },
    methods: {
        // 播放回调
        onPlayerPlay(player) {
          console.log('player play!', player)
        },

        // 暂停回调
        onPlayerPause(player) {
          console.log('player pause!', player)
        },

        // 视频播完回调
        onPlayerEnded($event) {
          console.log($event)
        },

        // DOM元素上的readyState更改导致播放停止
        onPlayerWaiting($event) {
          console.log($event)
        },

        // 已开始播放回调
        onPlayerPlaying($event) {
          console.log($event)
        },

        
        // 当播放器在当前播放位置下载数据时触发
        onPlayerLoadeddata($event) {
          console.log($event)
        },

        // 当前播放位置发生变化时触发。
        onPlayerTimeupdate($event) {
          console.log($event)
        },

        //媒体的readyState为HAVE_FUTURE_DATA或更高
        onPlayerCanplay(player) {
          // console.log('player Canplay!', player)
        },

        //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
        onPlayerCanplaythrough(player) {
          // console.log('player Canplaythrough!', player)
        },

        //播放状态改变回调
        playerStateChanged(playerCurrentState) {
          console.log('player current update state', playerCurrentState)
        },

        //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
        playerReadied(player) {
          console.log('example player 1 readied', player);
        }
    }
};
</script>
